<template>
  <view class="wai">
    <!-- 海报 -->
    <view class="pojaib">
      <image class="image" :src="backimg" mode=""></image>
      <image :style="'top: ' + top + '%; left: ' + left + '%;'" :src="er2" class="erweima" mode=""></image>
      <!-- <image    :style="'top: ' + top + '%; left: ' + left + '%;'" class="erweima" :src="er2" mode=""></image> -->
      <!-- <view class="yaoqing">邀请码</view> -->
      <!-- <view class="yaoid">
        {{ tuigId }}
      </view> -->
    </view>
    <!-- 图标 -->
    <view class="icon-box">
      <view class="icon-items" @click="toRewards">
        <image src="@/static/save.png" class="item-picture" mode=""></image>
        <view class="">分销中心</view>
      </view>
      <view class="icon-items" @click="btn">
        <!-- 分享按钮修改版 -->
        <button style="width: 200rpx; background-color: transparent; font-size: 12px" open-type="share" class="publish">
          <view class="share-box">
            <image src="@/static/share.png" style="width: 60rpx; height: 50rpx" mode=""></image>
            <view style="margin-top: 26rpx">分享</view>
          </view>
        </button>
      </view>
      <view class="icon-items" @click="xiazi">
        <image src="@/static/download.png" class="item-picture" mode=""></image>
        <view class="">下载海报</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tuigId: '', //推广id
      er2: '', //二维码图片
      backimg: '', //背景图片
      top: '', //二维码位置
      left: '' //二维码位置
    };
  },
  onShow() {
    this.tuigId = this.app.id; //获取推广id
  },
  onLoad() {
    this.erweim(); //获取二维码
    this.getAssets(); //获取推广配置
  },
  // 小程序点击分享给微信好友
  onShareAppMessage(res) {
    if (res.from === 'button') {
      var that = this;
      this.tuigId = that.app.id; //邀请上级的id
      // 来自页面内分享按钮
      console.log(this.tuigId);
    }
    // 携带邀请上级的id让他进注册页这样就能获取到下属列表
    return {
      title: '邀请有礼',
      path: `/pages/login/register?referee=${this.tuigId}`,
      imageUrl: '/static/zsk.png'
    };
  },
  methods: {
    // 下载二维码
    xiazi() {
      // 触发下载（实际上是保存到相册）
      wx.downloadFile({
        url: this.er2,
        success: function (res) {
          console.log(22, res);
          // tempFilePath可以作为img标签的src属性显示图片
          const tempFilePath = res.tempFilePath;
          wx.saveImageToPhotosAlbum({
            filePath: tempFilePath,
            success(res) {
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 2000
              });
            }
          });
        }
      });
    },
    // 获取二维码
    erweim() {
      var that = this;
      uni.request({
        url: that.app.apiHost + `/getQrCode`,
        method: 'GET',
        header: { Authorization: 'bearer ' + that.app.getAuthCode() },
        success: (res) => {
          console.log(888, res.data.data.qrcode);
          this.er2 = res.data.data.qrcode;
        },
        fail(res) {}
      });
    },
    // 推广配置
    getAssets() {
      var that = this;
      uni.request({
        url: that.app.apiHost + `/getAssetsConfig`,
        method: 'GET',
        header: { Authorization: 'bearer ' + that.app.getAuthCode() },
        success: (res) => {
          this.backimg = res.data.data.backimg; //背景图片
          this.left = res.data.data.xnum;
          this.top = res.data.data.ynum;
          console.log(8888999, res.data.data);
        },
        fail(res) {}
      });
    },
    // 跳转到列表明细
    toRewards() {
      uni.navigateTo({
        url: `/subpkg_test/fenxiang2`
      });
    },
    // 分享按钮
    btn() {
      // #ifdef APP
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 0,
        href: `http://test-wap.zheshouka.com/pages/login/register?referee=${this.tuigId}`,
        title: '邀请有礼',
        summary: '邀请好友注册并销卡，即可获得奖励哦！',
        imageUrl: 'https://uapi.zheshouka.com/static/uniapp/img/logo.png',
        success: function (res) {
          console.log('success:' + JSON.stringify(res));
        },
        fail: function (err) {
          console.log('fail:' + JSON.stringify(err));
        }
      });
      // #endif
    }
  }
};
</script>

<style lang="scss" scoped>
.publish::after {
  border: none;
}

.wai {
  // padding: 30.77rpx;
  height: 100vh;
  .pojaib {
    position: relative;
    .yaoid {
      position: absolute;
      bottom: 13%;
      left: 44%;
      color: #ff0c0c;
      font-size: 32rpx;
    }
    .yaoqing {
      position: absolute;
      bottom: 21%;
      left: 43%;
      font-size: 30rpx;
      color: #fff;
    }
    .erweima {
      position: absolute;
      // top: 38%;
      // left: 38%;
      width: 190rpx;
      height: 190rpx;
    }
    .image {
      width: 100%;
      height: 800rpx;
    }
  }
  // 图标
  .icon-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40rpx;
    position: fixed;
    bottom: 0;
    width: 100%;
    .icon-items {
      // margin-top: 80rpx;
      // margin-right: 150rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      &:last-child {
        margin-right: 0;
      }
      .item-picture {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 30rpx;
        // background-color: rebeccapurple;
      }
      .share-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
